<template>
	<div class="select-check-point">
		<el-row :gutter="20">
			<el-col :span="20">
				<b>
				检测区域 
				</b>
				<!--v-model="sampleForm.monitorZone"-->
				<div style="width:calc(60% - 50px);display: inline-block;">
					<el-select filterable clearable @change="monitorZoneChange" v-model="monitorZone" value-key="id" placeholder="请确认基础信息客户栏是否已选择！"
					 style="width: 100%;" size='mini'>
						<el-option v-for="item in areaoptions" :key="item.id" :label="item.name" :value="item">
						</el-option>
					</el-select>
				</div>
			</el-col>
		</el-row>
		<el-row :gutter="20">
			<el-col :span="20">
				<b>
				监测点类型
				<!--{{monitorSelect}}-->
				</b>
				<!--v-model="sampleForm.monitorType"-->
				<div style="width:calc(60% - 50px);display: inline-block;">
					<el-select filterable clearable @change="monitorTypeChange" v-model="monitorType" value-key="code" placeholder="请选择监测点类型！"
					 style="width: 100%;" size='mini'>
						<el-option v-for="item in monitorSelect.itemList" :key="item.code" :label="item.name" :value="item">
						</el-option>
					</el-select>
				</div>
			</el-col>
		</el-row>
		<el-row :gutter="20">
			<el-col :span="24">
				<b style="float:left">
				监测点
				</b>
				<div style="width:calc(100% - 100px);display: inline-block;">
					<el-row>
						<el-col :span="8">
							<el-table :data="checkPointData" size="mini" :height="tableHeightF" @selection-change="handleSelectionChange" class='tableCon'>
								<el-table-column type="selection" min-width="38px" fixed>
								</el-table-column>
								<el-table-column property="name" label="监测点" min-width="120px" fixed>
								</el-table-column>
							</el-table>
						</el-col>
						<el-col :span="4" style="text-align:center;">
							<p style="margin-top:80px;">
								<el-button  size="mini" style="display:inline-block;" @click="addItem"  :class = "{'rightButton':true,'peiButton':selectdedItem.length > 0}"><i class="el-icon-arrow-right"></i></el-button>
							</p>
							<p style="margin:10px 0;">
								<el-button  size="mini" style="margin:0; display:inline-block;" @click="deletItem" :class = "{'leftButton':true,'peiButton':removeItem.length > 0}"><i class="el-icon-arrow-left"></i></el-button>
							</p>

						</el-col>
						<el-col :span="12">
							<!--:default-sort = "{prop: 'name', order: 'descending'}"-->
							<el-table :data="paramsPointList" size="mini"  :height="tableHeightF" @selection-change="handleRemoveChange" class='tableCon'>
								<el-table-column type="selection" min-width="38px" fixed>
								</el-table-column>
								<el-table-column property="name" label="监测点" min-width="120px">
								</el-table-column>
							</el-table>
						</el-col>
					</el-row>
				</div>
			</el-col>
		</el-row>
		<el-row style="text-align: center;" class="commonFooter">
			<el-button @click="changeStep('taskBasicInfo')" size="mini">上一步</el-button>
			<el-button type="primary" @click="changeStep('addQc')" size="mini">下一步</el-button>
		</el-row>
	</div>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		name: 'select-check-point',
		props: ['newTaskPointList', 'newTaskBasic'],
		data() {
			return {
				monitorZone: '',
				monitorType: '',
				sampleForm: {
					id: '',
					monitorZone: '',
					monitorZoneName: '',
					monitorType: '',
				},
				checkPointData: [],
				paramsPointList: [],
				selectdedItem: [],
				DetectList: [],
				removeItem:[],
				tempPoint:[],
			}
		},
		computed: {
			...mapState(['areaoptions', 'tableHeightF', 'monitorSelect'])
		},
		mounted() {
			this.sampleForm.id = this.newTaskBasic.client
			this.readMonitors()
			this.paramsPointList = this.newTaskPointList
		},
		methods: {
			generateMixed(n) {
				var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
				var res = "";
				for (var i = 0; i < n; i++) {
					var id = Math.ceil(Math.random() * 35);
					res += chars[id];
				}
				return res;
			},
			//			获取监测点信息
			readMonitors(id) {
				this.$http({
					method: 'post',
					apiUrl: '/client/readMonitors.htm',
					params: { fRef: this.sampleForm.monitorZone, monitorType: this.sampleForm.monitorType, id:id || this.sampleForm.id },
					isJson: true,
				}).then(res => {
					if (res.code === 0) {
						this.checkPointData = res.data

					} else {
						//				          	reject(err)
					}
				}, )
			},
			monitorZoneChange(val) {
				this.sampleForm.monitorZone = val.id
				this.sampleForm.monitorZoneName = val.name
				this.readMonitors()
			},
			monitorTypeChange(val) {
				this.sampleForm.monitorType = val.code
				this.readMonitors()
			},
			changeStep(tabName) {
				if (tabName == "addQc"){
					if (this.paramsPointList.length == 0) {
						this.$notify({
							title: "警告",
							message: "请先选择监测点!",
							type: "warning"
						})
						return;
					}
				}
				this.$parent.$parent.changeTab(tabName)
				this.$parent.$parent.showNewTaskData()
			},
			handleSelectionChange(val) {

				this.selectdedItem = [];
				this.selectdedItem = val
				console.log(this.selectdedItem)
			},
			handleRemoveChange(val) {

				this.removeItem = [];
				this.removeItem = val;
				if(this.removeItem ==undefined || this.removeItem == null){
					this.removeItem = []
				}
			},
			addItem() {
				for (let i = 0; i < this.selectdedItem.length; i++) {
					for (let j = 0; j < this.paramsPointList.length; j++) {
						if (this.selectdedItem[i].id == this.paramsPointList[j].id) {
							this.paramsPointList.splice(j, 1)
						}
					}
					this.selectdedItem[i].analyst = this.selectdedItem[i].defaultAnalysts;
					this.selectdedItem[i].analystName = this.selectdedItem[i].defaultAnalystsName;
					this.selectdedItem[i].monitorZone = this.selectdedItem[i].monitorZone;
					this.selectdedItem[i].monitorZoneName = this.selectdedItem[i].monitorZoneName;

					this.selectdedItem[i].monitor = this.selectdedItem[i].id
					this.selectdedItem[i].monitorName = this.selectdedItem[i].name

					this.selectdedItem[i].name = this.selectdedItem[i].name
					this.selectdedItem[i].parent = this.generateMixed(32);

					this.selectdedItem[i].subcontractor = '';
					this.selectdedItem[i].subcontractorName = '';

					this.paramsPointList.push(this.selectdedItem[i])
				}

				this.checkPointData = this.util.deleteArrSomeObj({ allArr: this.checkPointData, delArr: this.selectdedItem, unique: 'id' });
				console.log(this.paramsPointList)
			},
			deletItem() {
				if (this.removeItem.length == 0) {
					return;
				}
				for (let i = 0; i < this.removeItem.length; i++) {
					for (let j = 0; j < this.paramsPointList.length; j++) {
						if (this.removeItem[i].id == this.paramsPointList[j].id) {
							this.paramsPointList.splice(j, 1)
						}
					}
				}
				this.checkPointData = this.util.repeatData({ old: this.checkPointData, new: this.removeItem, unique: 'id' });

			},
		},
		watch:{
			
		}
	}

</script>

<style lang="scss">
	.select-check-point {
		.el-row {
			margin-bottom: 10px;
			b {
				font-weight: normal;
				width: 100px;
				display: inline-block
			}
		}
		.rightButton,.leftButton{
		    display: inline-block;
			border: 1px solid #dcdfe6;
			background-color: #f5f7fa;
			color: #c0c4cc;
			width: 36px;
			height: 36px;
			border-radius: 50%;
			padding: 10px;
			span{
				font-size:14px;
			}
		}
		.peiButton{
			color: #fff;
    		background-color: #409eff;
		}
	}
</style>
<style>
	
</style>